<template>
  <view class="fr_img">
    <!-- 主图 -->
    <image
      v-if="src"
      class="fr_img_content"
      :src="src"
      :mode="mode"
      :lazy-load="lazyLoad"
      :webp="webp"
      :show-menu-by-longpress="showMenuByLongpress"
      @error="onImgError"
      @load="onImgLoad"
    />
    <view
      v-if="loading_complete && completeTransition"
      class="loading_complete_transition"
    ></view>

    <!-- 加载失败图 -->
    <view v-if="loading_error || !src" class="loading_error">
      <image
        class="loading_error_img"
        :src="loadingErrorImg"
        mode="aspectFit"
      ></image>
    </view>

    <!-- 加载中图 -->
    <view v-else-if="!loading_complete && src" class="loading">
      <image
        v-if="loadingIngImg == 'two-balls'"
        class="loading_img"
        :src="require('./loading_two_balls.gif')"
        mode="aspectFit"
      ></image>
      <view
        v-if="loadingIngImg == 'oblique-light'"
        class="loading_oblique_light"
      ></view>
      <view v-if="loadingIngImg == 'looming'" class="loading_looming"></view>
    </view>
    <!-- TODO 验证src无的情况 -->
  </view>
</template>

<script>
  export default {
    props: {
      // 和官方Image组件属性一致
      src: {
        type: String,
        default: '',
      },

      mode: {
        type: String,
        default: '',
      },

      lazyLoad: {
        type: Boolean,
        default: false,
      },

      webp: {
        type: Boolean,
        default: false,
      },

      showMenuByLongpress: {
        type: Boolean,
        default: false,
      },

      // 可选： 加载失败图片：可以本地url、网络url、base64 （与src一致）
      loadingErrorImg: {
        type: String,
        default: require('./loading_error.png'),
      },

      // 可选： 加载中的图片
      // two-balls = 两个球来回转
      // oblique-light = 斜光
      // looming = 若影若现
      // 本地url、网络url、base64 = 自定义的加载中图片（与src一致）
      loadingIngImg: {
        type: String,
        default: 'oblique-light',
      },

      // 可选：是否需要加载完成动画
      completeTransition: {
        type: Boolean,
        default: true,
      },
      // 错误图片样式
      errorImgStyle: {
        type: String,
        default: '', // 'width: 100%;height: 100%;'
      },
    },

    data() {
      return {
        loading_complete: false,
        loading_error: false,
      };
    },

    methods: {
      onImgError: function (event) {
        this.loading_error = true;
        this.$emit('error', event);
      },

      onImgLoad: function (event) {
        this.loading_complete = true;
        this.$emit('load', event);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .fr_img {
    width: 100%;
    height: 100%;
    position: relative;

    .fr_img_content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .loading_complete_transition {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #ffffff;
      animation: loading_complete_transition 1.2s forwards;
    }

    @keyframes loading_complete_transition {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .loading_error {
      width: 100%;
      height: 100%;
      background-color: #f8f8f8;
      position: absolute;

      display: flex;
      justify-content: center;
      align-items: center;

      .loading_error_img {
        width: 50px;
        height: 50px;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .loading {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      position: absolute;

      display: flex;
      justify-content: center;
      align-items: center;

      // 加载图
      .loading_img {
        width: 50px;
        height: 50px;
        max-width: 100%;
        max-height: 100%;
      }

      // 斜光
      .loading_oblique_light {
        width: 100%;
        height: 100%;

        background-color: #e3e3e3;
        background-image: linear-gradient(
          100deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0) 80%
        );
        background-size: 50px 100%;
        background-repeat: repeat-y;
        background-position: 0 0;
        animation: loading_oblique_light 0.6s infinite;
      }

      @keyframes loading_oblique_light {
        to {
          background-position: 200% 0;
        }
      }

      // 若隐若现
      .loading_looming {
        width: 100%;
        height: 100%;
        animation: loading_looming 1s infinite linear;
        background-color: #e3e3e3;
      }
      @keyframes loading_looming {
        0% {
          background-color: rgba($color: #e3e3e3, $alpha: 0.5);
        }
        50% {
          background-color: rgba($color: #e3e3e3, $alpha: 1);
        }
        100% {
          background-color: rgba($color: #e3e3e3, $alpha: 0.5);
        }
      }
    }
  }
</style>
